<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <style>
        h1,html,body{
            margin: 0;
            padding: 0;
        }
        .header{
            background-color: #3c763d;
            height: 80px;
        }
        .container{
            width: 100%;
            padding: 0;
            display: flex;
        }
        .left{
            background-color: #5bc0de;
            flex: 2;
            height: 900px;
        }
        .main{
            background-color: #122b40;
            flex: 8;
            height: 900px;
        }
    </style>
</head>
<body>
<div id="app">
    <router-view></router-view>
    <div class="container">
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
    </div>
</div>

</body>
<script>
    var header = {
        template: '<h1 class="header">header头部区域</h1>'
    }
    var leftBox = {
        template: '<h1 class="left">leftBox区域</h1>'
    }
    var mainBox = {
        template: '<h1 class="main">mainBox区域</h1>'
    }

    // 创建路由对象
    var router = new VueRouter({
        routes: [
            {
                path: '/', components: {
                    'default': header,
                    'left': leftBox,
                    'main': mainBox
                }
            }
        ]
    });
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。'
        },
        methods: {},
        router: router

    })
</script>
</html>